<include file="Home@Public/mobile_head"/>
<style type="text/css">
body,html{ background:#414e5f}
.head_hd img{ display:block; width:100%;}
.main_body{ margin:0 14px; position:relative;}
.main_body h6{ text-align:center; line-height:50px; padding:0 15px; font-size:20px; color:#eee;}
.main_body .intro{ padding:0 10px 0; color:#fff; font-size:13px; color:#ddd;}
.intro_content{ padding:5px 0; margin-bottom:10px;}
.vs{ overflow:hidden; position:relative; padding-bottom:30px; overflow:hidden; color:#fff}
.vs_item{ width:33%; text-align:center; position:relative; float:left; margin-bottom:15px;}
.vs_item img{ width:70px; height:70px; border-radius:100%; border:5px solid #fff; display:block; margin:20px auto; position:relative; z-index:100;}
.vs_item .count{ line-height:30px; font-size:12px; display:none}
.vs_item .name{ padding: 6px 5px;background: #647284;color:#fff;border-radius:5px;font-size:10px;display: block;margin: 0 10px;}
.circle_name{ border-radius:100%; background:#fff; color:#333; width:60px; height:40px; padding:20px 10px; display:inline-block; font-size:13px; text-align:center;}
.total_tips{ border-radius:10px; color:#fff; text-align:center; padding:5px 0; margin:0 50px; border:1px dashed #647284}
</style>
<body>
<div id="container" class="container">
	  <div class="head_hd">
          <img src="{$info.cover|get_cover_url}" width="100%"/>
      </div>
      <div class="main_body">
      	   <h6>{$info.title}</h6>  
            <div class="intro">
               <p class="intro_content">
                    {$info.desc}
              </p>
           </div>
           <form class="vs" id="form">
           		<volist name="opts" id="vo">
                	<div class="vs_item vs_item_{$i}" data-count = "{$vo.guess_count}">
                        <input type="radio" name="optArr[]" value="{$vo.id}" style="display:none"/>
                        <notempty name="vo[image]">
                        	<img <php>if(in_array($vo['id'], $joinData)) echo 'style="border-color:#018455" ';</php> src="{$vo.image|get_cover_url}"/>
                         	<span class="name">{$vo.name}</span>
                        <else/>
                        	<span class="circle_name" <php>if(in_array($vo['id'], $joinData)) echo 'style="background:#89dbfa" ';</php>>{$vo.name}</span>
                        </notempty>
                        
                       
                        <div><span class="count">{$vo.guess_count|intval}</span>人猜TA</div>
                    </div>
                </volist>
                <input type="hidden" value="{:I('token')}" name="token" />
                <input type="hidden" value="{:I('wecha_id')}" name="wecha_id" />
                <input type="hidden" value="{$info.id}" name="guess_id" />
           </form>
           <div class="total_tips"><span id="totalCount">{$info.guess_count|intval}</span>人参加</div>
          
      </div>
    </div>
<p class="copyright">{$system_copy_right}</p>
<include file="Home@Public/mobile_foot"/> 
<script>
$.WeiPHP.initWxShare({
	title:"{$info.title}",
	imgUrl:"{$info.cover|get_cover_url}",
	desc:"{$info.desc}",
	link:window.location.href
})

var canJoin = '{$canJoin}';
if(canJoin=="" || canJoin=='false'){
	$('.vs_item .count').show();
	$('.vs_item .progress').show();
}
$('.vs_item').click(function(){
	$.Dialog.loading();
	$(this).find('input').prop('checked',true);
	__this = $(this);
	$.ajax({
		url:"{:U( 'saveGuess' )}",
		data:$('#form').serializeArray(),
		dataType:"json",
		type:"POST",
		success:function(data){
			//console.log(data);
			if(data.result=='success'){
				$.Dialog.confirm("提示",data.msg);
				var totalCount = parseInt($('#totalCount').text())+1;
				$('#totalCount').text(totalCount)
				__this.find('.count').text(parseInt(__this.find('.count').text())+1);
				$('.vs_item .count').show();
				$('.vs_item .progress').show();
			}else{
				$.Dialog.fail(data.msg);
			}
			
		}
	})
})
</script>
</body>
</html>